<script setup>
import {computed, ref} from "vue";
import {preview} from "vue3-image-preview";

const visible = ref(false)

const record = ref({
  images: '',
  files: '',
  content: '',
})
const imageList = computed(() => {
  const {images} = record.value
  if (!images) return []
  return images.split(',').filter(Boolean)
})
const fileList = computed(() => {
  const {files} = record.value
  if (!files) return []
  return files.split(',').filter(Boolean).map(name => {
    const fileName = name.substring(name.lastIndexOf('/')).slice(1)
    return {url: name, name: fileName}
  })
})
defineExpose({
  open(data) {
    if (!data) return
    visible.value = true
    data.content = decodeURIComponent(data.content)
    record.value = data
  }
})
function previewImage(img) {
  preview({images: imageList.value, index: img})
}

function downLoadFile({name, url}) {
  let a = document.createElement('a')
  a.download = name
  a.href = url
  a.click()
  a = null
}
</script>

<template>
  <el-dialog v-model="visible"
             title="资料详情"
             width="68vw"
  >
    <div class="detail-content">
      <el-scrollbar>
        <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                名称
              </div>
            </template>
            {{ record.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                创建时间
              </div>
            </template>
            {{ record.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                类型
              </div>
            </template>
            {{ record.typeName }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="item-wrap">
          <div class="item-title">
            <span>内容</span>
          </div>
          <div v-html="record.content"></div>
        </div>
        <div class="item-wrap">
          <div class="item-title">
            <span>图片</span>
          </div>
          <div class="images-wrap">
            <div class="image-item"
                 v-for="(img,imgIndex) in imageList"
                 :key="imgIndex"
            >
              <img @click="previewImage(imgIndex)" alt="images" class="image-target" :src="img"/>
            </div>
          </div>
        </div>
        <div class="item-wrap">
          <div class="item-title">
            <span>文件名</span>
          </div>
          <div class="file-wrap">
            <div class="file-item"
                 v-for="(item,index) in fileList"
                 :key="index"
            >
              <span>{{ item.name }}</span>
              <el-button link type="primary" @click="downLoadFile(item)">下载</el-button>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.detail-content {
  height: 600px;

  .item-wrap {
    margin-top: 24px;

    .file-wrap {
      .file-item {
        width: 100%;
        height: 40px;
        padding: 0 11px;
        background-color: #f5f5f5;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .images-wrap {
      display: flex;
      flex-flow: row wrap;
      gap: 16px;

      .image-item, .image-target {
        width: 220px;
        height: 220px;
      }

      .image-item {
      }
    }

    .item-title {
      font-weight: bold;
      color: #3c4353;
      margin-bottom: 8px;
    }
  }
}
</style>
